<template>
  <view>
    <view class="identify-btn-media">
      <view class="identify-btn-box" :class="{ active: isLoading }">
        <view class="loading">
          <view class="line1"></view>
          <view class="line3"></view>
          <view class="line2"></view>
          <view class="line4"></view>
          <view class="line5"></view>
          <view class="line3"></view>
          <view class="line4"></view>
          <view class="line1"></view>
          <view class="line2"></view>
        </view>
      </view>
    </view>
  </view>
</template>

<script setup>
import { ref } from 'vue'

const isLoading = ref(true)

function toggleLoading() {
  isLoading.value = !isLoading.value
}
</script>

<style lang="scss" scoped>
.identify-btn-media {
  width: 100%;
  text-align: center;
}
.identify-btn-box {
  width: 100%;
}
.identify-btn-box .loading {
  display: inline-block;
  animation-play-state: paused;
}
.identify-btn-box.active .loading {
  animation-play-state: running;
}
.identify-btn-box .loading > view {
  display: inline-block;
  vertical-align: middle;
  width: 12rpx;
  margin-right: 15rpx;
  border-radius: 50rpx;
  animation-play-state: inherit;
  background-color: #5D7DFF;
}
.identify-btn-box .loading > view:last-child {
  margin-right: 0;
}
.line1 {
  animation: lines 0.5s infinite ease-in-out alternate;
  background-color: #4498FF !important;
}
.line2 {
  animation: lines 0.3s infinite ease-in-out alternate;
  background-color: #4498FF !important;
}
.line3 {
  animation: lines 0.4s infinite ease-in-out alternate;
}
.line4 {
  animation: lines 0.2s infinite ease-in-out alternate;
  background-color: #4498FF !important;
}
.line5 {
  animation: lines 0.6s infinite ease-in-out alternate;
}

@keyframes lines {
  from,
  10% {
    height: 8rpx;
  }
  to,
  90% {
    height: 36rpx;
  }
}

</style>
